<template>
	<view>
		<view class="mar-top20 center710 overflow-hidden" v-if="list.length>0">
			<scroll-view scroll-x="true" @scroll="changeScroll">
				<view class="jingang-d-box pad-t-10">
					<view class="item d-inline-block" v-for="(item,index) in list" :key="index">
						<view class="d-a-j-c flex-column position-relative" @tap="openBanner(item.type,item.page,item.parameter,item.url_type)">
							<view class="img-d"><image :src="item.icon" mode="widthFix" lazy-load></image></view>
							<view class="font-24 mar-top10 text-overflow">{{item.name}}</view>
							<view class="jdhong-bj white-zt font-20 tag line-h32 position-absolute" v-if="item.sub_name!=''">{{item.sub_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="wid-100 d-a-j-c">
				<view class="scrol-x-Dot-box border-r position-relative">
					<view class="scrol-x-Dot border-r position-absolute" :style="{left:left+'px'}"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:Array
		},
		data() {
			return {
				left:0,
			};
		},
		methods:{
			//打开banner
			openBanner(type,url,id,url_type){
				getApp().openBanner(type,url,id,url_type)
			},
			//监听金刚区滑动
			changeScroll(e){
				//计算移动的距离
				this.left=e.detail.scrollLeft/20
			}
		}
	}
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		display: block;
	}
	.jingang-d-box{
		width: 1420rpx;
		.item{
			width: 142rpx;
			margin-bottom: 30rpx;
			.img-d{
				width: 90rpx;
				height: 90rpx;
			}
			.tag{
				padding-left: 10rpx;
				padding-right: 10rpx;
				border-top-right-radius: 20rpx;
				border-top-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				border: 2rpx solid #ffffff;
				top: -5rpx;
				right: -3rpx;
			}
		}
	}
	.scrol-x-Dot-box{
		width: 71rpx;
		height: 10rpx;
		background: #e8e8e8;
		.scrol-x-Dot{
			height: 10rpx;
			width: 35.5rpx;
			background: #7ab13d;
		}
	}
</style>